import React, {  useState,  useCallback} from 'react';
import {
    Switch,
    Route,
    useHistory,} from 'react-router-dom'
import NavBar from '@/components/navBar/NavBar';
import Content from './components/Content';
import Detail from './Detail';
import BSScroll from '@/components/bsScroll/BSScroll';

const Index = (props) => {
    const history = useHistory();
    const backHandler=useCallback(()=>{
        history.push('/My');
    },[history])
    const [data]= useState([
        {
            title:'体重',
            value:'50.0',
            type:'weight',
            icon:'openArmFill',
            color:'#2984F8',
            date:'2021/9/2 14:54',
            unit:'Kg',
            level:0
        },
        {
            title: '血糖',
            value: '9.6',
            type: 'bloodSugar',
            icon:'contrastDropFill',
            color: '#FA746B',
            date: '2021/9/2 14:54',
            unit: 'mmol/L',
            level: 1
        },
        {
            title: '血压',
            value: '120/80',
            type:'bloodPressure',
            icon:'runLine',
            color: '#3DD4A7',
            date: '2021/9/2 14:54',
            unit: 'mmHg',
            level: -1
        },
        {
            title: '心率',
            value: '90',
            type:'heartRate',
            icon:'chatHeartLineFill',
            color: '#6C76F4',
            date: '2021/9/2 14:54',
            unit: 'bmp',
            level: 0
        }
    ]);
    return (

        <>
        <Switch>
                <Route path="/My/monitoring/detail/:type">
                    <Detail></Detail>
            </Route>
                <Route path="/My/monitoring">
                    <div >
                        <NavBar
                            title="健康监测"
                            leftArrow={true}
                            clickLeft={backHandler}
                        ></NavBar>
                        <BSScroll
                        id='monitoring_index_scroll'
                        height='calc(100vh - .46rem)'
                        >
                            <Content data={data} ></Content>
                        </BSScroll>
                        <Content data={data} ></Content>
                    </div>
            </Route>
        </Switch>
        
        </>
        
    );
}

export default Index;
